<template>
    <div id="my-select">
        <div @click="showSelectList" class="value-box">
            <span v-if="!value" class="tip">请选择</span>
            <span v-else class="value">{{value}}</span>
        </div>
        <ul v-show="selectShow">
            <li v-for="(item, index) in data" :key="index" @click="choseValue(item)">{{item}}</li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: 'Select',
        props: {
            data: Array
        },
        data () {
            return {
                selectShow: false,
                value: ''
            }
        },
        methods: {
            // [showSelectList 显示选项]
            showSelectList () {
                this.selectShow = true;
            },
            /**
             * @description 选择当前项
             * @param {string} value 当前选中值
             */
            choseValue (value) {
                this.value = value;
                this.selectShow = false;
                this.$emit('selectFunc', value);
            }
        }
    }
</script>

<style scoped>

</style>